<template>
    <el-dialog
        :close-on-click-modal="false"
        title="事件详情"
        :visible.sync="dialogVisible"
        height="440px"
        width="800px"
        class="re-dialog"
    >
        <div class="taaept-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="事件名称：" :label-width="formLabelWidth" prop="eventName">
                    <el-input readonly placeholder="请输入名称" v-model="ruleForm.eventName"></el-input>
                </el-form-item>
                <el-form-item label="事件地点：" :label-width="formLabelWidth" prop="eventAddress">
                    <el-input readonly placeholder="请输入地点" v-model="ruleForm.eventAddress"></el-input>
                </el-form-item>
                <el-form-item
                    label="事件来源："
                    :label-width="formLabelWidth"
                >{{record.eventSourceName||'-'}}</el-form-item>
                <el-form-item
                    label="上报时间："
                    :label-width="formLabelWidth"
                >{{getTimeStr(record.createTime) || ""}}</el-form-item>
                <el-form-item label="事件描述：" :label-width="formLabelWidth" prop="eventDetail">
                    <el-input
                        readonly
                        type="textarea"
                        placeholder="请输入描述"
                        v-model="ruleForm.eventDetail"
                    ></el-input>
                </el-form-item>
                <el-form-item label="处理意见：" :label-width="formLabelWidth" prop="opinion">
                    <el-input
                        type="textarea"
                        placeholder="请输入意见"
                        v-model="ruleForm.opinion"
                        :maxlength="1000"
                    ></el-input>
                </el-form-item>
                <el-form-item label="附件：" :label-width="formLabelWidth">
                    <div v-if="record.sysAttrFiles&&record.sysAttrFiles.length>0">
                        <img
                            v-for="(item,index) in record.sysAttrFiles"
                            :key="index"
                            class="fujianImg"
                            alt="点击查看附件"
                            title="点击查看附件"
                            @click="onShowImg(item.uploadPath)"
                            :src="item.uploadPath"
                        />
                    </div>
                    <span v-else>暂无附件</span>
                </el-form-item>
            </el-form>
            <div class="time-line-parent">
                <Timeline :list="record.eventFlowData" :title="record.eventName" />
            </div>
        </div>
        <div v-if="!!currentImg" @click="toggleMaskImg" class="img-mask">
            <img :src="currentImg" />
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button
                v-if="btnType==1||!btnType"
                type="primary"
                @click="submitForm('ruleForm',1)"
                size="small"
            >督 办</el-button>
            <el-button
                v-if="btnType==2||!btnType"
                type="success"
                @click="submitForm('ruleForm',2)"
                size="small"
                style="background-color:#1cca82; border-color:transparent"
            >办 结</el-button>
        </span>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
import { getTimeStr } from "../../utils/index";
import Timeline from "../common/Timeline";
import {
    sortingEventinfoPress,
    sortingEventinfoEnd,
    findByDictCode
} from "../../config/api";
export default {
    components: {
        Timeline
    },
    props: {
        // list: Array
    },
    data() {
        return {
            record: {},
            formLabelWidth: "90px",
            dialogVisible: false,
            getTimeStr,
            ruleForm: {
                eventName: "",
                eventAddress: "",
                eventDetail: "",
                opinion: ""
            },
            rules: {
                opinion: [
                    {
                        required: true,
                        message: "请输入处理意见",
                        trigger: "blur"
                    }
                ]
            },
            sourceCodeList: [],
            btnType: "",
            currentImg: "",
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe(
            "ProcessingDialog",
            (type, values) => {
                console.log(values);
                if (values.item) {
                    this.btnType = values.btnType;
                    this.ruleForm = {
                        eventName: values.item.eventName,
                        eventAddress: values.item.eventName,
                        eventDetail: values.item.eventDetail,
                        opinion: values.item.opinion
                    }; //重置
                    this.dialogVisible = true;
                    this.record = values.item || {};
                } else {
                    this.ruleForm = {};
                    setTimeout(() => {
                        this.$refs.ruleForm.clearValidate(); //重置
                    }, 0);
                }
            }
        );
        // this.getDictCode();
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onShowImg(url) {
            this.currentImg = url;
        },
        /**
         * 关闭放大图片
         */
        toggleMaskImg() {
            this.currentImg = "";
        },
        submitForm(formName, type) {
            this.$refs[formName].validate((valid, values) => {
                if (valid) {
                    const { record, ruleForm } = this;
                    if (type == 1) {
                        //督办
                        sortingEventinfoPress({
                            id: record.id,
                            opinion: ruleForm.opinion
                        }).then(res => {
                            this.$message({
                                message: "督办成功",
                                type: "success"
                            });
                            Pubsub.publish("SORT_CENTER_STATISTICS");//刷新我的统计
                            Pubsub.publish("SORT_CENTER_PRESS");//刷新我的督办
                            Pubsub.publish("SORT_CENTER_TODO");//刷新我的待办
                            Pubsub.publish("myBacklogList");
                            this.dialogVisible = false;
                        });
                    } else {
                        //办结
                        sortingEventinfoEnd({
                            id: record.id,
                            opinion: ruleForm.opinion
                        }).then(res => {
                            this.$message({
                                message: "办结成功",
                                type: "success"
                            });
                            Pubsub.publish("SORT_CENTER_STATISTICS");//刷新我的统计
                            Pubsub.publish("SORT_CENTER_PRESS");//刷新我的督办
                            Pubsub.publish("SORT_CENTER_TODO");//刷新我的待办
                            Pubsub.publish("myBacklogList");
                            this.dialogVisible = false;
                        });
                    }
                }
            });
        }
    }
};
</script>

<style lang = "scss" scoped>
.taaept-box {
    display: flex;
    flex-direction: row;
    > * {
        flex: 1;
        padding-left: 20px;
    }
}
.dialog-footer {
    margin-top: 0;
}
.time-line-parent {
    max-height: 70vh;
    overflow-y: auto;
}
.fujianImg {
    display: inline-block;
    max-height: 50px;
    max-width: 100px;
    cursor: pointer;
    margin-right: 5px;
}
</style>